<template>
  <div class="part-stock">
    <table>
      <thead>
        <tr>
          <th>{{$t('common.base.warehouse')}}</th>
          <th width="180">{{$t('part.components.partStock.text1')}}</th>
          <th width="120">{{$t('common.base.quantity')}}</th>
        </tr>
      </thead>
      <tbody>
        <template v-if="null == stock">
          <tr>
            <td colspan="3">{{$t('common.base.tip.noData')}}</td>
          </tr>
        </template>
        <template v-else>
          <tr v-for="(item, index) in stock" :key="index">
            <td>
              <template v-if="isOpenData && item.repertoryStaffId">
                <open-data type="userName" :openid="item.repertoryStaffId"></open-data>
              </template>
              <template v-else>
                {{item.repertoryName}}
              </template>
            </td>
            <td>{{item.repertoryType}}</td>
            <td>
              {{item.repertoryCount}}
              <el-tooltip class="item" effect="dark" :content="$t('part.components.partStock.text4', {data1: item.safetyStock})" placement="top">
                <el-tag size="mini" type="danger" style="float: right"
                        v-if="item.safetyStock && (item.safetyStock > item.repertoryCount)"
                >{{$t('part.components.partStock.text2')}}</el-tag>
              </el-tooltip>

            </td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td>{{$t('part.components.partStock.text3')}}：{{repertoryTotalCount}}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
import { isOpenData } from '@src/util/platform'
export default {
  name: 'part-stock',
  inject: ['initData'],
  props: {
    stock: {
      type: Array,
      default: [],
    }
  },
  data() {
    return {
      isOpenData
    }
  },
  computed: {
    repertoryTotalCount() {
      if (!this.stock || !this.stock.length) return 0;
      return this.stock
        .map(r => r.repertoryCount)
        .reduce((a, b) => a + b);
    }
  },
}
</script>

<style lang="scss">
  .part-stock{
    padding: 0 10px 10px 10px;
    color: #666;

    table{
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;

      thead th{
        color: #454545;
      }
      tbody tr:hover{
        background-color: #ebeef5;
      }

      td,th{
        padding: 12px 8px;
        text-align: left;
        border-bottom: 1px solid #ebeef5;
      }
    }
  }
</style>
